{% import _self as self %}

{% for check in checks %}
    {% if loop.index0 != 0 %}
        <div class="clear"></div>
    {% endif %}
    {% if check.pdf %}
        <iframe src="{{ check.url }}" width="95%" height="1200px" style="border: 0"></iframe>
    {% else %}
        <br>
        {% if check.actual %}
        <div style="height:23px; float:right;">
            <a id="show_char_{{ index }}_{{ loop.index0 }}" class="btn btn-default" style="float:right;" onclick="changeDiffView('container_{{ index }}_{{ loop.index0 }}', '{{ gradeable_id }}', '{{ who }}', '{{ display_version }}', '{{ index }}', '{{ loop.index0 }}', 'white_space_helper_{{ index }}')">Visualize whitespace characters</a>
        </div>
        <div><span style="margin-left: 20px" class="line_code" id='white_space_helper_{{ index }}'></span></div>
        {% endif %}

        <div class="box-block">

            {% if not check.actual %}
               <h4 style="margin-bottom: 0">{{ check.description }}</h4>
               <div>
               {{ self.render_messages(check.messages) }}
               </div>
            {% else %}
               {{ self.render_diff_element(check, check.actual, 0, popup_css_file, index, loop.index0) }}
            {% endif %}
            {% if check.expected %}
                {{ self.render_diff_element(check, check.expected, 1, popup_css_file, index, loop.index0) }}
            {% endif %}
            {% if check.difference %}
                {{ self.render_diff_element(check, check.difference, 2, popup_css_file, index, loop.index0) }}
            {% endif %}

        </div>
    {% endif %}

{% endfor %}

{% macro render_diff_element(check, element, side, popup_css_file, index, check_index) %}
    <!-- Readded css here so the popups have the css -->
    <div class=
      {% if element.type != "sequence_diagram" %}
        'diff-element'>
      {% else %}
        'mermaid-element'>
      {% endif %}
        <h4>
            {{ element.title }}
            {% if element.show_popup %}
                <span onclick="openPopUp('{{ popup_css_file }}', '{{ element.title }}', {{ index }}, {{ check_index }}, {{ side }});">
                    <i class="fas fa-window-restore" style="cursor: pointer;"></i>
                </span>
            {% endif %}
        </h4>

        {% for message in check.messages %}
              {% set type_class = "black-message" %}
              {% if message['type'] == "information" %}
                 {% set type_class = "blue-message" %}
              {% elseif message['type'] == "success" %}
                 {% set type_class = "green-message" %}
              {% elseif message['type'] == "failure" %}
                 {% set type_class = "red-message" %}
              {% elseif message['type'] == "warning" %}
                 {% set type_class = "yellow-message" %}
              {% endif %}
              <span class="{{ type_class }}">{{ message['message'] }}</span><br />
        {% endfor %}

        <div id="container_{{ index }}_{{ check_index }}_{{ side }}">
            {% if element.type == "image" %}
                <img src="{{ element.src }}" style="border:2px solid black">
            {% elseif element.type == "text" %}
                <div id="div_{{ index }}_{{ check_index }}">
                    {{ element.src|raw }}
                </div>
            {% elseif element.type == "sequence_diagram" %}
              <div class="mermaid" id="div_{{ index }}_{{ check_index }}">
                sequenceDiagram
                {{ element.src |escape }}
              </div>
              <script>
                // Unfortunately, mermaid takes in manual css changes as a string by default.
                var config = {
                  "startOnLoad":false,
                  "theme" : "default",
                  "themeCSS":".messageText{fill: #333;stroke: none;font-size: 12px;}.actor{stroke:var(--standard-light-blue);fill:var(--standard-pale-blue)}text.actor{word-wrap:break-word}.actor-line{stroke:var(--standard-medium-dark-gray)}.positive-end{content:'\f00c';font-family:'Font Awesome 5 Free'}.negative-end{content:'\f12a';font-family:'Font Awesome 5 Free'}.labelText{word-wrap:break-word}.note{stroke:var(--standard-light-yellow);fill:var(--standard-pale-yellow)}.noteText{word-wrap:break-word}",
                  "useMaxWidth" : false
                };
                mermaid.initialize(config);
                mermaid.init( { "useMaxWidth" : false }, "#div_{{ index }}_{{ check_index }}");
              </script>
            {% endif %}
        </div>
    </div>
{% endmacro %}


{% macro render_messages(messages) %}
   {% for message in messages %}
      {% set type_class = "black-message" %}
      {% if message['type'] == "information" %}
         {% set type_class = "blue-message" %}
      {% elseif message['type'] == "success" %}
         {% set type_class = "green-message" %}
      {% elseif message['type'] == "failure" %}
         {% set type_class = "red-message" %}
      {% elseif message['type'] == "warning" %}
         {% set type_class = "yellow-message" %}
      {% endif %}
      <span class="{{ type_class }}">{{ message['message'] }}</span><br />
   {% endfor %}
{% endmacro %}

